<template>
	<div>
		<div class="return-home">
			<router-link to="/home">
				<p class="return-text">
					<van-icon name="arrow-left" />返回
				</p>
			</router-link>
			<p class="bufan">不凡</p>
		</div>
		<!-- 搜索栏 -->
		<div class="box" v-if="current == 'sousuo'">
			
			<form action="/" class="sousuo"  >
			  <van-search
			    v-model.trim="value"
			    show-action
			    placeholder="请输入搜索关键词"
			    @search="onSearch"
			    @cancel="onCancel"
				@input="iptEvents"
			  />
			</form>
			<!-- 历史记录 -->
			<div class="history" v-for="item in hotKeywordList" :key="item.keyword">
				{{item.keyword}}
			</div>
		</div>
		
		<!-- 搜索商品 -->
		<div class="goods" v-else-if="current =='goods'">
			
			<form action="/" class="sousuo"  >
			  <van-search
			    v-model.trim="value"
			    show-action
			    placeholder="请输入搜索关键词"
			    @search="onSearch"
			    @cancel="onCancel"
				@input="iptEvents"
			  />
			</form>
			<div v-for="item in searchList" :key="item.id" @click="events(item.name)">
				{{item.name}}
			</div>
		</div> 
		<!-- 跳转的商品页 -->
		 <div class="goods-list" v-else>
			
			<div v-for="item in goodsShow " :key="item.id">
				<img :src="item.list_pic_url" alt="">
				{{item.name}}
			</div>
		</div> 
		
		<!-- 这个标签不要动 ↓↓↓ ↓↓↓↓↓↓-->
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import {
		indexaction,
		helperaction,
		addhistoryaction
	} from "../../../api/home/search/index.js"
	export default {
	  data() {
	    return {
	      value: "",
		   current:"sousuo",
		  hotKeywordList:[],
		  searchList:[],
		  goodsShow:[],
	    };
	  },
	  created(){
		  this.init()
	  },
	  methods: {
		  events(val){
			  this.current = "goods-list";
			  helperaction({
			  keyword:val,
			  order:""
			  })
			  .then( res =>{
			   console.log(res)
			   this.goodsShow = res.data.keywords;	
			  }),
			  addhistoryaction({
				 
				  keyword:val,
				  openId:localStorage.getItem("openId")
			  })
			  .then(res =>{
				  console.log(res)
			  })
			  
		  },
		  iptEvents(){
			  if(this.value.length ==0){
				  this.current = "sousuo"
			  }else{
				  this.current ="goods";
				  helperaction({
					  keyword:this.value,
					  order:""
				  })
				  .then( res =>{
					  console.log(res)
					  this.searchList = res.data.keywords;	
				  })
			  }
			 
		  },
		async  init(){
			var res = await   indexaction({
				  openId:localStorage.getItem("openId")
			  })
			  console.log(res)
			  this.hotKeywordList = res.data.hotKeywordList;
		  }, 
	    onSearch(val) {
	      Toast(val);
	    },
	    onCancel() {
	      Toast('取消');
	    },
	  },
	};
</script>

<style scoped lang="scss">
	@import "../scss/index.scss";
// 头部
	.return-home {
		display: flex;
		font-size: 16px;
		margin-left: 20px;

		.return-text {
			color: blue;
		}

		.bufan {
			margin-left: 60px;
		}
	}
	// 搜索框
	.sousuo{
		width: 76%;
	}
</style>
